<template>
  <!-- 固定在页面顶部 -->
  <div class="app-header">
    <div class="van-nav-bar van-hairline--bottom">
      <div class="van-nav-bar__content">
        <NavBar left-text="返回" left-arrow @click-left="goBack" />
        <div class="van-nav-bar__title van-ellipsis">我的订单</div>
      </div>
    </div>
  </div>

  <div class="order-list">
    <el-row :gutter="16">
      <!-- 使用 orders 来渲染列表，一行只展示一张卡片 -->
      <el-col v-for="order in orders" :key="order.id" :span="24" class="order-item">
        <el-card :body-style="{ padding: '12px' }" @click="goToDetail(order.id)">
          <div class="order-card">
            <p class="order-item-text">所购商品:<br>{{ order.receiverTagName }}</p>
            <p class="order-status">订单状态:代发货</p>
            <p class="order-item-text">收货人:{{ order.nickName }}</p>
            <p class="order-item-text">收货地址:{{ order.receiverAddress }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { useRoute, useRouter } from 'vue-router';
import { NavBar } from 'vant';
import { ref, onMounted } from 'vue';
import axios from 'axios';

const route = useRoute();
const router = useRouter();

export default {
  components: { NavBar },
  data() {
    return {
      orders: [], // 用来存储从接口获取的订单列表
    };
  },
  methods: {
    goToDetail(orderId) {
      this.$router.push({ name: 'list1', params: { orderId } });
    },
    goBack() {
      this.$router.push({ name: 'my' });
    },
    // 获取订单数据并赋值给 orders
    show() {
      const token = '983613da64364eaf9851bb2e1c6db397'; // 您的 token
      axios.get('http://localhost:8501/order/list', {
        headers: { token }
      }).then(res => {
        this.orders = res.data.data; // 将获取的订单列表赋值给 orders
        console.log(this.orders); // 调试输出查看返回的数据
      }).catch(error => {
        console.error("获取订单失败:", error);
      });
    },
  },
  mounted() {
    this.show(); // 在组件挂载时加载数据
  }
};
</script>

<style scoped>
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background-color: #fff; /* 背景色可以根据需要修改 */
}

.order-list {
  margin-top: 60px; /* 调整内容位置，确保不被固定头部遮挡 */
}

.van-nav-bar {
  border-bottom: 1px solid #e5e5e5;
}
</style>
